<!--_meta 作为公共模版分离出去-->
<!DOCTYPE HTML>
<html>
<head>
	<meta charset="utf-8">
	<meta name="renderer" content="webkit|ie-comp|ie-stand">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
	<meta http-equiv="Cache-Control" content="no-siteapp" />
	<link rel="Bookmark" href="favicon.ico" >
	<link rel="Shortcut Icon" href="favicon.ico" />
	<!--[if lt IE 9]>
	<script type="text/javascript" src="lib/html5.js"></script>
	<script type="text/javascript" src="lib/respond.min.js"></script>
	<![endif]-->
	<link rel="stylesheet" type="text/css" href="static/h-ui/css/H-ui.css" />
	<link rel="stylesheet" type="text/css" href="lib/Hui-iconfont/1.0.9/iconfont.css" />
	<link rel="stylesheet" type="text/css" href="static/business/css/style.css" />
	<!--[if IE 6]>
	<script type="text/javascript" src="http://lib.h-ui.net/DD_belatedPNG_0.0.8a-min.js" ></script>
	<script>DD_belatedPNG.fix('*');</script><![endif]-->
	<!--/meta 作为公共模版分离出去-->

	<title>柱状图 - 系统统计 - h-ui.admin.pro v1.0</title>
	<meta name="keywords" content="h-ui.admin.pro v1.0,H-ui网站后台模版,后台模版下载,后台管理系统模版,HTML后台模版下载">
	<meta name="description" content="h-ui.admin.pro v1.0，是一款由国人开发的轻量级扁平化网站后台模板，完全免费开源的网站后台管理系统模版，适合中小型CMS后台系统。">
</head>
<body>
	<div class="wap-container">
		<nav class="breadcrumb" style="background-color:#fff;padding: 0 24px">
			首页
			<span class="c-gray en">/</span>
			系统统计
			<span class="c-gray en">/</span>
			柱状图
			<a class="btn btn-success radius f-r" style="line-height:1.6em;margin-top:3px" href="javascript:location.replace(location.href);" title="刷新" ><i class="Hui-iconfont">&#xe68f;</i></a>
		</nav>
		<article class="Hui-admin-content clearfix">
			<div class="panel">
				<div class="panel-body">
					<div class="row clearfix">
						<div class="col-xs-6">
							<div class="panel">
								<div class="panel-header">
									手机号运营商统计
								</div>
								<div class="panel-body">
									<div id="echarts-1" style="height: 300px;"></div>
								</div>
							</div>
						</div>
						<div class="col-xs-6">
							<div class="panel">
								<div class="panel-header">
									已经完善生日年龄统计
								</div>
								<div class="panel-body">
									<div id="echarts-2" style="height: 300px;"></div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		<article>
	</div>
	<!--_footer 作为公共模版分离出去-->
	<script type="text/javascript" src="lib/jquery/1.9.1/jquery.min.js"></script>
	<script type="text/javascript" src="lib/layer/3.1.1/layer.js"></script>
	<script type="text/javascript" src="static/h-ui/js/H-ui.js"></script>
	<!--/_footer 作为公共模版分离出去-->

	<!--请在下方写此页面业务相关的脚本-->
	<script type="text/javascript" src="lib/echarts/4.1.0.rc2/echarts.min.js"></script>
	<script type="text/javascript">
	$(function () {
		// 手机号运营商
    var echarts1 = echarts.init(document.getElementById('echarts-1'));
    var echarts1_option = {
      title: {
        show: false
      },
      color: ['#1890ff'],
      tooltip: {
        trigger: 'item',
      },
      grid: {
				top: '3%',
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      xAxis: {
        type: 'value',
        boundaryGap: [0, 0.01]
      },
      yAxis: {
        type: 'category',
        data: ['其他','电信','移动','联通']
      },
      barWidth : 24,
      emphasis: {
        itemStyle: {
          shadowColor: 'rgba(0, 0, 0, 0.5)',
          shadowBlur: 2,
        }
      },
      series: [
        {
          type: 'bar',
          data : [200, 700, 800, 900],
        }
      ]
    }
    echarts1.setOption(echarts1_option);

		// 已经完善生日年龄统计
    var echarts2 = echarts.init(document.getElementById('echarts-2'));
    var echarts2_option = {
      title : {
        show: false
      },
      color: '#1890ff',
			grid: {
				top: '3%',
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      xAxis: {
        type: 'category',
        data: ['10岁以下', '10-15岁', '16-20岁', '21-25岁', '26-30岁', '31-35岁', '36-40岁', '41-45岁', '46-50岁', '50岁以上']
      },
      yAxis: {
        type: 'value'
      },
      label: {
        fontSize: 14,
        color: '#666',
      },
      series: [
        {
          data: [10, 30, 35, 34, 50, 45, 43, 37, 30, 8],
          type: 'bar',
          itemStyle: {
            emphasis: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          },
          barWidth : 24,
        }
      ]
    }
    echarts2.setOption(echarts2_option);
	});
	</script>
	<!--/请在上方写此页面业务相关的脚本-->
</body>
</html>
